<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.datatables.min.css"
          rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables-custom.css"
          rel="stylesheet" type="text/css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>
        .head-one {
            padding: 20px 20px 50px 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
            margin-top: 20px;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            margin-top: 20px;
            box-sizing: inherit;
            display: block;

        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }

        .el-card__body {
            margin-bottom: 15px;
            padding: 20px 20px 20px 20px;
            background-color: white;
            font-size: 14px;
            border: solid 1px rgba(0, 0, 0, 0.2);
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            color: #6b6a6a;
            font-weight: 600;
            font-size: 14px;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }

        .row .line-one {
            padding-bottom: 10px;
        }


        .head-one .row .input-group input {
            border-radius: 6px;
        }

        .head-one .row .input-group select {
            border-radius: 20px;
        }

        .head-one input:focus {
            border: 1px #00a8ff solid;
        }

        .head-one select {
            border-radius: 6px;
        }

        .row .col-sm-3 input {
            width: 40px;
        }

        .pagination > li > input {
            outline: none;
            width: 40px;
            text-align: center;
        }

        #my-select {
            outline: none;
        }

        .pagination > li > form, .pagination > li > select, .pagination > li > input {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

    </style>
</head>

<body class="sticky-header">


<%@include file="../inc/left.jsp" %>


<!-- main content start-->
<div class="main-content" style="background-color: rgb(238,238,238)">

    <%@include file="../inc/header.jsp" %>
    <!--body wrapper start-->


    <div class="wrapper"><!---->
        <div class="page-title-box">
            <p class="page-title" style=" color: #6b6a6a;font-weight: 600;font-size: 14px;padding-left: 10px">
                广告列表(杨旭)</p>
            <ol class="breadcrumb">
                <li>
                    <a href="/mall/index">首页</a>
                </li>
                <li>
                    <a href="#">营销</a>
                </li>
                <li class="active">
                    广告列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>


        <div class="el-card__body head-one" style="padding-bottom: 20px">

                <button class="btn" style="float: right; margin-right: 15px;" id="btn-restart">
                    <span>重置</span></button>

            <form method="post" action="${pageContext.request.contextPath}/sell/likeAll">
                <div><i class="fa fa-search"></i> <span
                        style="font-size: 16px">筛选搜索</span>
                    <button type="submit" class="btn-info btn" style="float: right;margin-right: 20px;">
                        <span>查询搜索</span></button>
                </div>
                <div style="margin-top: 15px;">
                    <div class="row" id="row-re">
                        <div class="form-inline line-one">
                            <div class="col-md-3  col-sm-offset-1">
                                <label class="control-label wk-filed-label">广告名称： </label>
                                <div class="input-group">
                                    <input required="required" name="name" type="text"
                                           class="form-control wk-long-2col-input" placeholder="广告名称"/>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <label class="control-label wk-filed-label">广告位置：</label>
                                <select class="wk-select form-control " name="type">
                                    <option value="1">app首页轮播</option>
                                    <option value="0">pc首页轮播</option>

                                </select>
                            </div>

                            <div class=" col-lg-4">
                                <label class="control-label wk-filed-label">到期时间： </label>
                                <div class="input-group">
                                    <input required name="endTime" type="date"
                                           class="form-control wk-normal-input" placeholder="请输入工作地点"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>


        <div class="el-card__body ">
            <i class="fa fa-file-text-o" aria-hidden="true"></i>
            <span style="font-size: 16px;">数据列表</span>
            <div style="float: right">
                <a href="${pageContext.request.contextPath}/sell/advertise-update">
                    <button data-v-2ef16592="" type="button" class="btn-info btn" style="margin-top: -10px">
                        <span>添加广告</span>
                    </button>
                </a>
            </div>
        </div>

        <div class="head-three el-card__body operate-container is-never-shadow" style="margin-top: 20px">
            <table class="table table-bordered table-main">
                <thead>
                <tr>
                    <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                    <th style="text-align: center">编号</th>
                    <th style="text-align: center">广告名称</th>
                    <th style="text-align: center">广告位置</th>
                    <th style="text-align: center">广告图片</th>
                    <th style="text-align: center">时间</th>
                    <th style="text-align: center">上线/下线</th>
                    <th style="text-align: center">点击次数</th>
                    <th style="text-align: center">生成订单</th>
                    <th style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${pageInfo.list}" var="ad">
                    <tr>
                        <td><input type="checkbox" id="checks"></td>
                        <td>${ad.id}</td>
                        <td>${ad.name}</td>
                        <td><p>${ad.type==1?"app首页轮播":"pc首页轮播"}</p></td>
                        <td><img src="${ad.pic}" style="width: 100px;height: 50px" height="100px"></td>
                        <td><p>开始时间：<fmt:formatDate value="${ad.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
                            <P>结束时间：<fmt:formatDate value="${ad.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/></P></td>
                        <td>
                            <i style="color: #0e90d2;font-size: 30px;line-height: inherit"
                               class="fa fa-toggle-${ad.status==1?"on":"off"}" onclick="changeI(${ad.id})">
                            </i></td>
                        <td>${ad.clickCount}</td>
                        <td>${ad.orderCount}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/sell/updateFindById/${ad.id}">
                                <button class="btn-info btn">编辑</button>
                            </a>
                            <button class="btn-danger btn" id="deleteBtn" onclick="deleteId(${ad.id})">删除</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div>
                <form action="advertise?page">

                    <ul class="pagination" id="myul">
                        <li class="pagination">
                            <span>共${pageInfo.total}条</span>
                        </li>
                        <li class="pagination">
                            <select id="my-select">

                                <option value="5" ${pageInfo.pageSize==5?"selected":""}>5条/页</option>
                                <option value="10" ${pageInfo.pageSize==10?"selected":""}>10条/页</option>
                                <option value="20" ${pageInfo.pageSize==20?"selected":""}>20条/页</option>
                            </select>
                        </li>
                        <c:if test="${pageInfo.pageNum>1}">
                            <li><a href="advertise?page=${pageInfo.pageNum-1}">上一页</a></li>
                        </c:if>

                        <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                            <li class="${pageInfo.pageNum==i?"active":""}"><a href="advertise?page=${i}">${i}</a></li>
                        </c:forEach>

                        <c:if test="${pageInfo.pageNum<pageInfo.pages}">
                            <li><a href="advertise?page=${pageInfo.pageNum+1}">下一页</a></li>
                        </c:if>

                        <li class="pagination">
                            <span>前往</span>
                        </li>
                        <li class="pagination">
                            <input name="page" id="input-name">
                        </li>
                        <li class="pagination">
                            <span>页</span>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Wrapper-->


<%@include file="../inc/footer.jsp" %>


</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->
<script>
    <%--    重置--%>
    $("#btn-restart").click(function () {
        $("#row-re input").val('')
        location.reload()
    })
    <%--    删除--%>

    function deleteId(id) {
        let str = window.confirm("确定删除吗？");
        if (str) {
            $.get("${pageContext.request.contextPath}/sell/deleteById/" + id, function (response) {
                if (response.code == 1) {
                    location.reload();
                }
            })
        }
    }

    /*状态按钮改变*/
    function changeI(id) {
        $.get("${pageContext.request.contextPath}/sell/statusById/" + id, function (response) {
            if (response.code == 1) {
                location.reload();
            }
        })
    }

    <%--    每页条数--%>
    $("#my-select").change(function () {
        let size = $(this).val();
        console.info(size)
        location.href = "${pageContext.request.contextPath}/sell/advertise?page=1&size=" + size;
    })
    //前往






    <%--// 上一页--%>
    <%--$("#prev").click(function () {--%>
    <%--    let size = $("#pages").val();--%>
    <%--    location.href="${pageContext.request.contextPath}/sell/advertise?page=${pageInfo.pageNum-1}" + "&size=" + size;--%>
    <%--})--%>
    <%--// 下一页--%>
    <%--$("#next").click(function () {--%>
    <%--    let size = $("#pages").val();--%>
    <%--    console.info(size)--%>
    <%--    location.href = "${pageContext.request.contextPath}/sell/advertise?page=${pageInfo.pageNum + 1}" + "&size=" + size;--%>
    <%--})--%>

    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick = function () {
            all.checked = this.checked
        }
    }

    $("#updateBtn").on("click", function () {
        var id = "";
        $(":radio").each(function () {
            if ($(this).is(":checked")) {
                id = $(this).attr("id").substr(5, $(this).attr("id").length);
            }
        });

        if (id != "") {
            location.href = "${pageContext.request.contextPath}/updateFindById/" + id;
        }
    });

    $("#deleteBtn").on("click", function () {
        var id = "";
        $(":radio").each(function () {
            if ($(this).is(":checked")) {
                id = $(this).attr("id").substr(5, $(this).attr("id").length);
            }
        });

        if (id != "") {
            $("#deleteConfirm").modal();
            $("#deleteBtnOK").on("click", function () {
                location.href = "${pageContext.request.contextPath}/deleteById/" + id;
            });
        }
    });

</script>
</body>

</html>

